<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="js/mui.js"></script>
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>

    <style>
        #btn_add_friend {
            background-color: #1aad19;
        }

        #btn_add_friend:active {
            background-color: #128e12;
        }

        #btn_send_msg {
            background-color: #1aad19;
        }

        #btn_send_msg:active {
            background-color: #128e12;
        }
    </style>
</head>

<body>

<header class="mui-bar mui-bar-nav title" style="position: fixed;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
    <h1 class="mui-title title-color"><b id="chatting-nickname">详细资料</b></h1>
</header>

<div class="mui-content">

    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" style="padding-top: 10px;">
            <a id="open_img" href="javascript:;">
                <img id="img_friend_face" class="mui-media-object mui-pull-left" src=""
                     style="border-radius: 8%;line-height: 50px;max-width: 50px;height: 50px;margin-left: 6px">
                <div class="mui-media-body">
                    <label id="lab_friend_nickname" style=""></label>
                    <p id="p_friend_username" class="mui-ellipsis"></p>
                </div>
            </a>
        </li>
    </ul>

    <br/>
    <div style="text-align: center;">
        <button id="btn_add_friend" type="button" class="mui-btn mui-btn-block"
                style="color: white;width: 90%;display: inline;padding: 12px 0">添加好友
        </button>
        <button id="btn_back" type="button" class="mui-btn mui-btn-block"
                style="width: 90%;display: inline;padding: 12px 0">返回
        </button>
    </div>

</div>

<script type="application/javascript" src="js/app.js"></script>
<script type="text/javascript">
    mui.init();

    mui.plusReady(function () {

        //获取自己的信息
        var user = app.getUserGlobalInfo();
        //获取传递的信息
        var source = plus.webview.currentWebview();
        var friend = source.friend;
        var result = source.result;
        var waitShowData;

        if (friend != null) {
            waitShowData = friend;
            console.log(JSON.stringify(friend));
        } else {
            if (result != null) {
                waitShowData = result;
                console.log(JSON.stringify(result));
            } else {

            }
        }

        //注册事件 点击头像
        var open_img = document.getElementById("open_img");
        open_img.addEventListener("tap", function () {
            open_img_windows(waitShowData.faceImageBig);
        });

        //注册事件 发送好友请求
        var btn_add_friend = document.getElementById("btn_add_friend");
        btn_add_friend.addEventListener("tap", function () {
            requestFirend(user, friend);
        });

        //注册事件 返回
        var btn_back = document.getElementById("btn_back");
        btn_back.addEventListener("tap", function () {
            mui.back();
        });

        /*//添加自定义事件,刷新头像
        window.addEventListener("refresh", function () {
            source = plus.webview.currentWebview();
            var result = source.result;
            console.log(JSON.stringify(result));
            showScanQrCodeResult(result);
        });*/

        //初始化页面
        showData(waitShowData);
        //如果是二维码进来的页面则去判断是否是好友 并修改按钮和添加事件
        if (result != null) {
            checkFriend(user, result);
        }


    });

    //检查是否是朋友
    function checkFriend(user, result) {
        mui.ajax(app.serverUrl + "/friend/checkIsNotFriend", {
            data: {
                myUserId: user.id,
                friendId: result.id
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log(JSON.stringify(data));
                //判断状态
                if (data.status == 200) {
                    //如果是朋友的话修改按钮为发送消息
                    updateBtn(result.id);
                } else {
                    console.log("还不是朋友");
                    return false;
                }
            }
        });
    }

    //已经是朋友 修改按钮为发送消息
    function updateBtn(friendId) {
        var btn_add_friend = document.getElementById("btn_add_friend");
        btn_add_friend.innerText = "发送消息";
        btn_add_friend.id = "btn_send_msg";
        var btn_send_msg = document.getElementById("btn_send_msg");
        btn_send_msg.addEventListener("tap", function () {
            alert("发送消息");
        })
    }

    //展示数据
    function showData(waitShowData) {

        //初始化页面
        var lab_friend_nickname = document.getElementById("lab_friend_nickname");
        var img_friend_face = document.getElementById("img_friend_face");
        var p_friend_username = document.getElementById("p_friend_username");

        if (app.isNotNull(waitShowData.faceImage)) {
            img_friend_face.src = app.imgServerUrl + waitShowData.faceImage;
        } else {
            img_friend_face.src = "image/face.jpeg";
        }
        lab_friend_nickname.innerHTML = waitShowData.nickname;
        p_friend_username.innerHTML = "微信号: " + waitShowData.username;

    }

    //打开大图页面 并传递头像大图src
    function open_img_windows(faceImageBig) {

        mui.openWindow({
            url: "firendFace.html",
            id: "firendFace.html",
            styles: {},
            extras: {
                img_src: faceImageBig
            }
        });
    }

    //发送好友请求
    function requestFirend(user, friend) {
        //防止扫描二维码进入此页面点击发送消息后出发添加好友事件
        if (friend == null) {
            return false;
        }
        //发送好友请求
        plus.nativeUI.showWaiting("请求中");
        mui.ajax(app.serverUrl + "/user/addFirend", {
            data: {
                myUserId: user.id,
                friendId: friend.id
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log(JSON.stringify(data));
                // 关闭等待框
                plus.nativeUI.closeWaiting();
                //判断状态
                if (data.status == 200) {
                    //提示信息
                    app.showToast("发送好友请求成功", "success");
                    mui.openWindow("index.html", "index.html");
                } else {
                    alert("发送好友请求");
                    app.showToast(data.msg, "error");
                    return false;
                }
            }
        });
    }

</script>
</body>

</html>